<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app>.user{
            color: red;
        }
    </style>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <template>
        <div>
            <h1 style="color:red;">测试数据</h1>
        </div>
    </template>
    <hr>
    
    <div id="app">
        <!-- 
            特殊标签属性 key => 实现数据和页面元素的一一对应关联操作
                        可以减少vue内部代码的执行步骤 => 提高vue的的循环运行效率

            vue中响应数据变化对应的页面渲染，默认采用就近渲染原则
            当vue在循环时为循环标签提供唯一关联属性 key 时，该循环标签在循环时和数据会产生唯一关系，会停用就近原则
            当key取值循环时的index下标时，和没有定义key效果一致
         -->
         <input type="button" value="切换" @click=" flag=!flag ">
         <p v-if="flag"> A <input type="text"> </p>
         <p v-else> B <input type="text"> </p>
         <hr>
         <p v-if="flag" key="aaa"> A <input type="text"> </p>
         <p v-else key="bbb"> B <input type="text"> </p>

         <hr>
         <ul>
            <li v-for="(item, index) in arr">{{ item }}</li>
         </ul>
         <hr>
         <ul>
            <li v-for="(item, index) in arr" :key="index">{{ item }}</li>
         </ul>
         <hr>
         <ul>
            <li v-for="(item, index) in arr" :key="item">{{ item }}</li>
         </ul>
         <input type="button" value="addItem" @click=" addItem() ">

         <hr>
        <!-- 
            <template> 辅助标签 => 在vue中提供不具有任何结构功能的容器标签，该标签可以用于分解或组合容器，但不产生任何副作用
            + v-if 和 v-for 同时出现，不建议v-if和v-for定义在同一个标签上，因为v-for优先级高于v-if，此时v-if不具有任何功能
                                     如果标签结构中存在父元素，可以将v-if移动在父元素上，但如果没有父元素，可以使用template
                                     构建父容器
        -->
        <input type="button" value="reset user" @click=" user=null ">
        <ol v-if="user&&user.skills">
            <li v-for="(item, index) in user.skills" :key="index">{{ item }}</li>
        </ol>
        <hr>
        <!-- <div class="user" v-if="user&&user.skills" v-for="(item, index) in user.skills" :key="index">{{ item }}</div> -->
        <template v-if="user&&user.skills">
            <div class="user"  v-for="(item, index) in user.skills" :key="index">{{ item }}</div>
        </template>

        <hr>
        
        <!-- v-for 定义与template标签上时，不能提供key属性绑定，因为template只是容器不是标签 -->
        <template v-for="(item, index) in users">
            <span>姓名:{{ item.name }}</span>
            <br>
            <span>工作:{{ item.job }}</span>
            <hr>
        </template>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                flag:true,
                arr:[],
                user:{
                    username:"tom",
                    tel:"123123123",
                    skills:["Carolanne","Obie","Elwin","Fred","Devin"]
                },
                users:[
                    { name:"Bud",job:"Agent" },
                    { name:"Vladimir",job:"Designer" }
                ]
            },
            methods:{
                addItem(){
                    // this.arr.push( Math.random() )
                    this.arr.unshift( Math.random() )
                }
            }
        })
    </script>

</body>
</html>